<template>
  <div>
    <div>
      <Header title="点评作业" subtitle="第一期" />
    </div>

    <div>
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column
          label="日期"
          property="date"
          width="120"
          align="center"
        >
          <template #default="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column
          property="name"
          label="姓名"
          width="120"
          align="center"
        />
        <el-table-column label="点评次数" property="buzhi" align="center" />
        <el-table-column label="创建次数" property="wangcheng" align="center" />
        <el-table-column label="布置次数" property="know" align="center" />

        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button @click="openDialog(scope.row)" type="primary" size="mini"
              >查看详细</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div>
        <el-dialog v-model="dialogFormVisible" title="布置情况" width="450">
        <el-form :model="rowData">
          <el-form-item label="姓名：" :label-width="80">
            <div>
                {{rowData.sname}}
            </div>
          </el-form-item>
        </el-form>
       
        
        <template #footer>
          <div
            class="dialog-footer"
            style="
              display: flex;
              justify-content: space-between;
              padding: 0vh 5vw;
            "
          >
            <el-button type="primary" @click="dialogFormVisible = false"
              >保存</el-button
            >
            <el-button type="primary" @click="dialogFormVisible.value = false">
              退出
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import Header from "@/components/titleHeader/TitleHeader.vue";
const dialogFormVisible = ref(false);
const rowData = ref({});


const openDialog = (row) => {
  rowData.value = row;
  console.log(rowData);
  dialogFormVisible.value = true;
};


const tableData = ref([
  {
    id: 1,
    date: "2016-05",
    name: "老师A",
    address: "Lohrbergstr. 86c, Süd Lilli, Saarl",
    sex: "男",
    phone: "1555344874",
    know: "微信",
    status: "未入训",
    type: "学生",
    buzhi: "12",
    wangcheng: "12",
    text: "",
    flower: 1,
    sname:"学生A"
  },
  {
    id: 2,
    date: "2016-04",
    name: "老师B",
    address: "暂未提交作业",
    sex: "男",
    phone: "1555344874",
    know: "微信",
    status: "以入训",
    type: "学生",
    buzhi: "2",
    wangcheng: "11",
    flower: 1,
    sname:"学生A"
  },
  {
    id: 3,
    date: "2016-03",
    name: "老师C",
    address: "暂未提交作业",
    sex: "女",
    phone: "1555344874",
    know: "微信",
    status: "未入训",
    type: "学生",
    buzhi: "2",
    wangcheng: "5",
    sname:"学生A"
  },
  {
    id: 4,
    date: "2016-02",
    name: "老师D",
    address: "暂未提交作业",
    sex: "女",
    phone: "1555344874",
    know: "微信",
    status: "未入训",
    type: "学生",
    buzhi: "5",
    wangcheng: "2",
    sname:"学生A"
  },
  {
    id: 5,
    date: "2016-01",
    name: "老师F",
    address: "23618 Windsor Drive, West Ricardoview, Idaho",
    sex: "女",
    phone: "1555344874",
    know: "微信",
    status: "未入训",
    type: "学生",
    buzhi: "20",
    wangcheng: "10",
    sname:"学生A"
  },
]);
</script>

<style  scoped>

</style>